<template>
  <!-- 首页巨幕区 -->
  <!-- 根据头部的高度调整top -->
  <div class="GiantCurtain" :style="`height:${mainHeight}px`">
    <!-- 窗口宽度>1024时显示 -->
    <div class="slogan slogan1">
      <h1>氢记笔记</h1>
      <h2 class="title2">探索你的知识海洋</h2>
      <i class="iconfont icon-bofang" @click="showLogin"></i>
      <span>开始探索</span>
    </div>
    <!-- 375<窗口宽度<1024时显示 -->
    <div class="slogan slogan2">
      <h1>氢记笔记</h1>
      <h2 class="title2">探索你的知识</h2>
      <h2 class="title2">海洋</h2>
      <i class="iconfont icon-bofang" @click="showLogin"></i>
      <span>开始探索</span>
    </div>
    <!-- 窗口宽度<375显示 -->
    <div class="slogan slogan3">
      <h1>氢记笔记</h1>
      <h2 class="title2">探索你的</h2>
      <h2 class="title2">知识</h2>
      <h2 class="title2">海洋</h2>
      <i class="iconfont icon-bofang" @click="showLogin"></i>
      <span>开始探索</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GiantCurtain",
  props: ["mainHeight"],
  methods:{
    showLogin(){
      console.log("显示登录");
      // 显示登录组件
      this.$store.commit("setIsShowLogin",true);
    }
  }
};
</script>

<style lang="less" scoped>
// 首页主内容区
.GiantCurtain {
  // 顶部外边距
  margin-top: 0;
  // 宽高
  width: 100%;
  // height: 800px;
  // 背景颜色
  background-color: white;
  // 背景图片
  background-image: url("../../../images/home/ocean.jpg");
  // 不重复
  background-repeat: no-repeat;
  // 铺满整个元素
  background-size: cover;
  // 背景居中
  background-position: center;
  // 弹性盒
  display: flex;
  // 纵向排列
  flex-direction: column;
  // 子元素水平垂直居中
  align-items: center;
  justify-content: center;
  // 标题样式
  .slogan {
    // 纵向排列
    flex-direction: column;
    // 字体水平居中
    text-align: center;
    // 垂直居中
    justify-content: center;
    // 文本
    h1,h2,span {
      // 字体颜色
      color: white;
      // 字体大小
      font-size: 36px;
      // 字体
      font-family: "楷体";
    }
    // 小标题
    .title2 {
      font-size: 58px;
    }
    // 播放图标
    .icon-bofang {
      // 小手
      cursor: pointer;
      // 顶部外边距
      margin-top: 50px;
      // 图标大小
      font-size: 96px;
      // 图标颜色
      color: white;
    }
  }
  // 大标题风格1
  .slogan1 {
    // 显示弹性盒
    display: flex;
  }
  // 大标题风格2
  .slogan2 {
    // 隐藏
    display: none;
  }
  // 大标题风格3
  .slogan3 {
    // 隐藏
    display: none;
  }
}
// [v-cloak] {
//   display: none;
// }
/*在浏览器视口宽小于500px时生效*/
@media (max-width: 1024px) {
  .GiantCurtain .slogan1 {
    display: none;
  }
  .GiantCurtain .slogan2 {
    display: flex;
  }
  .GiantCurtain .slogan3 {
    display: none;
  }
}
@media (max-width: 375px) {
  .GiantCurtain .slogan1 {
    display: none;
  }
  .GiantCurtain .slogan2 {
    display: none;
  }
  .GiantCurtain .slogan3 {
    display: flex;
  }
}
</style>